<template>
  <div class="app-container">
    <el-table :key='tableKey' :data="list" v-loading="listLoading" element-loading-text="给我一点时间" border fit highlight-current-row ref="table"
              @selection-change="handleSelectionChange"
              style="width: 100%">
      <el-table-column disabled type="selection" :selectable='checkboxInit' width="35" reserve-selection="" ></el-table-column>
      <el-table-column align="center" :label="$t('table.id')" width="65">
        <template slot-scope="scope">
          <span>{{scope.$index+1}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="用户名">
        <template slot-scope="scope">
          <span>{{scope.row.userName}}</span>
        </template>
      </el-table-column>


      <el-table-column align="center" label="邮箱">
        <template slot-scope="scope">
          <span>{{scope.row.email}}</span>
        </template>
      </el-table-column>

    </el-table>
    <div class="pagination-container">
      <el-pagination background @current-change="handleCurrentChange" :current-page.sync="page.page" :page-size="page.limit" layout="total, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>

    <div slot="footer" class="dialog-footer" v-if="dialogStatus !== 'info'" style="float: right;margin-top: 10px">

      <el-button @click="close">{{$t('table.cancel')}}</el-button>
      <el-button type="primary" @click="createData">{{$t('table.confirm')}}</el-button>
    </div>

  </div>


</template>

<script>
  // import { fetchList } from '@/api/user/userInfo'
  import { doSaveMailUsers, pageUserInfo } from '@/api/user/mailAcceptUsers'
  import waves from '@/directive/waves' // 水波纹指令
  import { parseTime } from '@/utils'

  export default {
    name: 'UserInfoList',
    directives: {
      waves
    },
    data() {
      return {
        tableKey: 0,
        list: null,
        total: null,
        listLoading: true,
        checkList: [],
        page: {
          page: 1,
          limit: 5,
          sort: ''
        },
        listQuery: {
          // compoundSearch: undefined,
          // expireStatus: undefined,
          // clearMethod: undefined,
          // contractNo:this.contractNo
          'page.limit': 5
        },
        dialogStatus: '',
        textMap: {
          update: '修改',
          create: '新增',
          info: '详情'
        },
        dialogPvVisible: false,
        pvData: [],
        rules: {
        },
        downloadLoading: false,
        selectIds: ''
      }
    },
    props: {
      dialogFormVisible: Boolean
    },
    filters: {

    },
    created() {
      this.getList()
    },
    methods: {
      getList() {
        this.listLoading = true
        pageUserInfo(this.listQuery).then(response => {
          // console.info(response.content.list);
          if (response.success) {
            this.list = response.content.list

            this.total = response.content.total
            this.listLoading = false
            this.$refs.table.clearSelection()
          } else {
            this.$message({
              type: 'fail',
              message: response.message
            })
          }
        })
      },
      // 搜索按钮
      handleFilter() {
        this.listQuery.page = 1
        this.getList()
      },
      // 跳转页数
      handleCurrentChange(val) {
        this.listQuery.page = val
        this.getList()
      },
      batchInvalid() {
        // TODO 批量失效
      },
      formatJson(filterVal, jsonData) {
        return jsonData.map(v => filterVal.map(j => {
          if (j === 'timestamp') {
            return parseTime(v[j])
          } else {
            return v[j]
          }
        }))
      },
      handleSelectionChange(selects) {
        this.selectIds = ''
        for (var select of selects) {
          this.selectIds += select.id
          this.selectIds += ','
        }
        this.selectIds = this.selectIds.substring(0, this.selectIds.length - 1)
      },
      close() {
        this.$emit('hideDialog')
      },
      resetPage() {
        this.page.page = 1
        this.listQuery.page = 1
      },
      createData() {
        if (!this.selectIds.length) {
          this.$message({
            type: 'fail',
            message: '未选中用户'
          })
          return
        }
        const params = { userIds: this.selectIds }
        doSaveMailUsers(params).then(response => {
          if (response.success) {
            this.$message({
              type: 'success',
              message: response.message
            })
            this.$emit('doSaveUsers')
            // this.list = response.content.list
            //
            // this.total = response.content.total
            // this.listLoading = false
          } else {
            this.$message({
              type: 'fail',
              message: response.message
            })
          }
        })
      },
      // 初始化页面,无邮箱不允许勾选
      checkboxInit(item) {
        var status = item.email
        if (!status) {
          return 0
        } else {
          return 1
        }
      }
    },
    watch: {
      dialogFormVisible() {
        this.getList()
      }
    }
  }
</script>
<style scoped>
  .el-dialog__body{
    height: 380px;
  }
  .app-container {
    padding: 0;
  }
</style>
